<template>
  <div class="loading-box">
    <div class="animate1"></div>
    <div class="animate2"></div>
  </div>
</template>
<style scoped>
/*动画*/
.loading-box{
  width:40px;
  height:40px;
  position:relative;
  margin:10px auto;
}
.loading-box div{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f66;
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
}
.loading-box .animate1{
  opacity:0.4;
  transform:scale(0);
  animation:animate2 1s infinite ease-in-out;
}
.loading-box .animate2{
  opacity:0.6;
  transform:scale(1);
  animation:animate1 1s infinite ease-in-out;
}
@keyframes animate1{
  from{
    transform:scale(0);
  }
  to{
    transform:scale(1);
  }
}
@keyframes animate2{
  from{
    transform:scale(1);
  }
  to{
    transform:scale(0);
  }
}
</style>
